/* eslint-disable no-undef */
import React,{ Component } from 'react'
import axios from 'axios'
import Header from '../ui-components/Header'
import Footer from '../ui-components/Footer'
import Tab from '../ui-components/Tab'
import './index.css'
import ObjectMap from '../common/ObjectMap'
import profile from './profile.jpg'
//渲染数据到页面，自定义遍历对象方法
class Data extends React.Component {
    render() {
        return (
            ObjectMap.call(this.props.hope,(data1, i) => {
            return (
                <div key={i} className="diss-sub">
                    <div className="diss-names">
                    <img src={profile} alt="头像" className="diss-profile" />&ensp;
                    {data1.names}
                    </div>
                    <div style={{ color: 'rgb(27, 224, 238)'  }}>主题：{data1.title}</div>
                    <div dangerouslySetInnerHTML={{__html:data1.content}} ></div>
                </div>
            )
            }))
    }
}
export default class index extends Component {
    constructor(props){
        super(props)
        this.state = {
            index: 0,
            hope:[]
        }
    }
    //向服务器发送网络请求，拿到数据库的数据，数据类型为对象
    componentDidMount(){
        const that = this
        axios.get(`/api1/data`)
        .then(function(response){
            that.setState({hope:response.data})
            console.log('成功了',response.data)
        })
        .catch(function(error){
            that.setState({error:error})
            console.log('失败了',error)
        })
    }

    onClick = (index) => {
        this.setState({index: index })
    }
    confirm  =()=>{
        this.props.history.push('/input')
    }
    confirm1 = (i) => {
        switch(i){
          case 0:
            this.props.history.push('/diss')
            break
          case 1:
            this.props.history.push('/navigation')
            break
          case 2:
            this.props.history.push('/book')
            break
          case 3:
            this.props.history.push('/member')
            break
          default:
            break
        }
     
      }
    render() {
       
        return (
            <div>
                <Header items={['讨论','导航','书柜','成员','活动','发现'] } confirm = {this.confirm1} ></Header>
                <div className="diss-tabs">
                    <div style={{fontSize:'3rem',width:'8rem',marginRight:'2rem' }}>讨论</div>
                    <Tab items={['最新', '待回答', '周榜']}
                        color="black"
                        selectColor="rgb(27, 224, 238)"
                        onClick={this.onClick}></Tab>
                    <button onClick={this.confirm} className="diss-button">提问题</button>
                </div>
                <div className="diss-sub1" >
                <Data hope={this.state.hope}/>
         </div>
                <Footer></Footer>
            </div>
        )
    }
}

